<template>
  <el-form
          :model="formData"
          status-icon
          :rules="rules"
          ref="form"
          label-width="100px"
          class="login_container">
    <h3 class="login_title">系统登录</h3>
    <el-form-item
            label="用户名"
            label-width="80px"
            prop="username"
            class="username"
    >
      <el-input type="input" v-model="formData.username" autocomplete="off" placeholder="请输入账户"></el-input>
    </el-form-item>
    <el-form-item
            label="密码"
            label-width="80px"
            prop="password">
      <el-input type="password" v-model="formData.password" autocomplete="off" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item class="login_submit">
      <el-button type="primary" @click="login" class="login_submit">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
    //import Mock from 'mockjs'
    import {getMenu} from '@Api/data.js';
    export default {
        name: "Login",
        data() {
            return {
                formData: {},
                // 校验
                rules: {
                    username: [
                        {
                            required: true,
                            message: '请输入用户名',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            message: '用户名长度不能小于3为',
                            trigger: 'blur'
                        }
                    ],
                    password: [
                        {
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            message: '密码长度不能小于3为',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            login() {
                getMenu(this.formData)
                    .then(({data:res}) => {
                        console.log(res);
                        if (res.code === 20000) {
                            this.$store.commit('clearMenu');
                            this.$store.commit('setMenu',res.data.menu);
                            this.$store.commit('setToken', res.data.token);
                            this.$store.commit('addMenu', this.$router);
                            this.$router.push({
                                name: 'Main'
                            })
                        } else {
                            this.$message.warning(res.data.message)
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
               /*const token = Mock.Random.guid()
                this.$store.commit('setToken', token);
               this.$router.push({
                   name: 'Home'
               })*/
            }
        }
    }
</script>

<style lang="less" >
  .login_container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .login_submit {
    margin: 10px auto 0px auto;
  }
  /*取消 页面长度而出现的滚动条*/
  body,html,#app{
     height: 0 !important;
   }
</style>